<template>
	
	<div>
		<!--热门城市-->
			<div class="hotCity">
		<h2>热门城市</h2>
		<ul>
			<li v-for="item in hotcity" :key="item.id">{{item.name}}</li>
		</ul>
	</div>
		
		<!--字母排序-->
	<div class="citysort">
		<h2>字母排序</h2>
		<ul>
			<li v-for="(value,key) in cities" :key="key">{{key}}</li>
		</ul>
	</div>
		
		
		<!--字母对应的城市-->
	  <div class="cityletter">
		<div v-for="(value,key) in cities" :key="key">
			<h2>{{key}}</h2>
		<ul class="ul1">
			<li v-for="item in value" :key="item.id">{{item.name}}</li>
		</ul>
		
		</div>
	   </div>
    </div>
</template>

<script>
	export default{
		props:["hotcity","cities"]
	}
	
	
</script>

<style scoped>
	
	/*热门城市*/
	.hotCity h2{
		background: #f5f5f5;
		font-size: .12rem;
    	padding: .12rem .15rem;
	}
	.hotCity ul{
		height: .9rem;
	}
	.hotCity ul li{
		width: 33.2%;
		height: .45rem;
	    line-height: .45rem;
	    font-size: .15rem;
	    text-align: center;
	    border-bottom: .01rem solid #ddd;
	    border-right: .005rem solid #ddd;
	  /*  margin-bottom: -1px;*/
	    float: left;
	}
	
	/*字母排序*/
	.citysort h2{
		background: #f5f5f5;
		font-size: .12rem;
    	padding: .12rem .15rem;
	}
	.citysort ul{
		width: 100%;
		height: 1.8rem;
		padding: .15rem 0;
	}
	.citysort ul li{
		width: 16.66%;
	    height: .45rem;
	    line-height: .45rem;
	    font-size: .14rem;
	    text-align: center;
	    float: left;
	    color: #212121;
	}
	
	
	/*字母对应的城市*/
	.cityletter h2{
		background: #f5f5f5;
		font-size: .12rem;
    	padding: .12rem .15rem;
	}
	.cityletter .ul1{
		
		overflow: hidden;
	}
	.cityletter ul li{
		width: 25%;
		box-sizing: border-box;
	    height: .45rem;
	    line-height: .45rem;
	    font-size: .14rem;
	    text-align: center;
	    border-bottom: .01rem solid #ddd;
	    margin-bottom: -1px;
	    float: left;
	    color: #212121;
	    text-overflow: ellipsis;
    	white-space: nowrap;
    	display: block;
    	overflow: hidden;
    	border-right: .01rem solid #ddd;
	}
	.cityletter ul li.on{
		border-right: none;
	}
	.cityletter ul li.on2{
		border-bottom: none;
	}
</style>